<template>
	<!-- 视频单项 -->
	<view class="video-layout">
		<view class='healthPromotion' :src="src" :change:src="renderScript.createPoster"></view>
		<video v-show="isplay" :id="`myVideo${index}`"
			:style="{'height':height,'width':'100%','borderRadius':`${borderRadius}rpx`}" :src="src" controls
			objectFit="contain" :enable-progress-gesture="enableProgressGesture" :initial-time="initialTime"
			x5-video-player-type="h5" x-webkit-airplay="allow" webkit-playsinline="true" @error="videoErrorCallback"
			@timeupdate="timeupdate" @play="play" @pause="pause">
			<!-- #ifdef APP-PLUS -->
			<cover-view :style="{ transform: 'translateX(' + moveX + 'px)'}" />
			<!-- #endif -->
			<!-- 不使用弹窗提示，视频内部提示可使用cover-view自定义播放提示样式 -->
		</video>
		<view v-show="!isplay" class="image"
			:style="{'height':height,'width':'100%','borderRadius':`${borderRadius}rpx`}" @click="beforePlay">
			<!-- <image mode="aspectFill" :src="poster" /> -->
			<image mode="aspectFill" :src="videoUnage"  />

			<view class="play" />
		</view>
	</view>
</template>
<script>
	// enable-progress-gesture 手势滑动在非app页面开启后，视频轮播会存在与轮播图，滑动事件同时触发的情况
	export default {
		props: {
			moveX: {
				type: [Number, String],
				default: 0
			}, // 轮播图兼容滑动兼容-单独使用可不传
			index: {
				type: [Number, String],
				default: 0
			}, // 下标索引
			height: {
				type: String,
				default: '750rpx'
			}, // 视频高度
			borderRadius: {
				type: Number,
				default: 0
			}, // 圆角值，单位rpx
			initialTime: {
				type: Number,
				default: 0
			}, // 指定视频初始播放位置，单位为秒（s）
			videoSize: {
				type: [Number, String],
				default: 10
			}, // 视频大小
			ignoreTip: {
				type: Boolean,
				default: true
			}, // 播放环境提示
			// #ifdef APP-PLUS 
			enableProgressGesture: {
				type: Boolean,
				default: true
			}, // 手势滑动
			// #endif
			// #ifndef APP-PLUS
			enableProgressGesture: {
				type: Boolean,
				default: false
			}, // 手势滑动
			// #endif
			src: { // 播放地址
				type: String,
				default: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4'
			},
			poster: { // 封面
				type: String,
				default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
			}
		},
		data() {
			return {
				videoUnage: '', //视频封面
				timedata: '', //当前播放的时间
				//   videoContext: null, // 视频实例
				isplay: false, // 播放状态
				isTip: true // 是否提示
			}
		},
		watch: {
			ignoreTip: {
				handler(v) {
					this.isTip = v
				},
				immediate: true
			}
		},
		// this.videoContext = uni.createVideoContext('myVideo')

		methods: {
			reciveMessage(val) {
				this.videoUnage = val[0]
			},
			timeupdate(e) { // 播放进度变化时触发--更新播放缓存
				this.timedata = e.target.currentTime
				this.$emit('timeupdate', e)
			},
			videoErrorCallback: function(e) {
			},
			play() {},
			pause(e) {
				this.isplay = false
				let plugin = uni.requireNativePlugin('neoceansoft-videoThumbnail')

				plugin.getFrame(this.src, 0, (e) => {
					if (e.code == 0) {
						this.videoUnage = res.imagePath
					}
				})
				// let  plugin=uni.requireNativePlugin('neoceansoft-videoThumbnail')
			},
			startPlay() { // 开始播放
				this.isplay = true
				this.$nextTick(() => {
					const id = `myVideo${this.index}`
					const video = uni.createVideoContext(id)
					video.play()
				})
			},
			pausePlay() { //暂停播放 
				const id = `myVideo${this.index}`
				const video = uni.createVideoContext(id)
				video.pause()
				this.isplay = false
			},
			beforePlay() { // 播放前拦截
				this.isplay = true // 拦截前显示播放视频
				if (!this.isTip) return this.startPlay() // 不提示直接播放
				// https://uniapp.dcloud.io/api/system/network?id=getnetworktype
				uni.getNetworkType({
					success: (res) => {
						const networkType = res.networkType
						if (networkType === 'wifi' || networkType === 'ethernet') {
							this.startPlay()
						} else {
							uni.showModal({
								title: '提示',
								content: `当前为移动网络，播放视频需消耗${this.videoSize}M流量，是否继续播放？`,
								success: (res) => {
									if (res.confirm) {
										this.startPlay()
										this.isTip = false
									} else {
										this.isplay = false
									}
								}
							})
						}
					}
				})
			}

		}
	}
</script>
<script module="renderScript" lang="renderjs">
	export default {
		methods: {
			createPoster(val) {
				val = [val]
				console.log(val, 'val')
				var videoCanList = [],
					curDateList = []
				val.forEach((item, index) => {
					var promise = new Promise((reslove, reject) => {
						// 在缓存中创建video标签
						var video = document.createElement("VIDEO")
						// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
						video.currentTime = 5
						// video.setAttribute('crossOrigin', 'anonymous');
						// video.setAttribute('autoplay', true)
						video.autoplay = true;
						video.crossOrigin = 'anonymous';
						// 再添加一个静音的属性，否则自动播放会有声音
						video.setAttribute('muted', 'muted')
						// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
						video.innerHTML = '<source src=' + item + ' type="audio/mp4">'
						// 再创建canvas画布标签
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						// video注册canplay自动播放事件
						video.addEventListener('canplay', function() {
							// 创建画布的宽高属性节点，就是图片的大小，单位PX
							var anw = document.createAttribute("width");
							anw.nodeValue = 375;
							var anh = document.createAttribute("height");
							anh.nodeValue = 375;
							canvas.setAttributeNode(anw);
							canvas.setAttributeNode(anh);
							// 画布渲染 
							ctx.drawImage(video, 0, 0,375, 375);
							// 生成图片
							var base64 = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
							// 视频结束播放的事件
							video.pause()
							curDateList.unshift({ // 这里是我自己的数据处理模块
								type: 'video',
								videoUrl: item.url,
								img: base64
							})
							console.log(base64, 'console.log(base64)')
							reslove(base64) // promise函数成功的回调
						}, false)
					})
					videoCanList.push(promise)
				})
				console.log(videoCanList, 'videoCanListvideoCanList')
				Promise.all(videoCanList).then(res => {
					console.log(res, 'res')
					this.$ownerInstance.callMethod('reciveMessage', res)
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.video-layout {
		display: flex;
		align-items: center;

		// video{
		//     width: 100%;
		//     height: 100%;
		//     /deep/.uni-video-container{
		//         width: auto;
		//         height: auto;
		//     }
		// }
		.image {
			position: relative;
			width: 100%;
			height: 100%;

			/deep/uni-image {
				width: 100%;
				height: 100%;
			}

			.play {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 80rpx;
				height: 80rpx;
				transform: translate(-50%, -50%);
				background-image: url('@/static/play.png');
				background-size: contain;
				background-repeat: no-repeat;
				background-color: rgba($color: #000000, $alpha: 0.1);
				border-radius: 50%;
			}
		}
	}
</style>
